<template>
  <el-container>
    <el-header>
      <Header/>
    </el-header>
    <el-divider></el-divider>
    <div style="align-self: center">
      <el-input style="width:200px" placeholder="请输入影片名称" suffix-icon="el-icon-search" v-model="movieName" @input="changNo"></el-input>
      <el-button @click="search" class="ml-5" type="primary" >搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <el-divider></el-divider>
    <el-table
        style="align-self: center"
        border
        :header-cell-style="headStyle"
        :data="tableData">
      <el-table-column prop="movieName" label="影片名称" width="100">
      </el-table-column>
      <el-table-column prop="synthesizeOffice" label="综合票房" width="300">
      </el-table-column>
      <el-table-column prop="sessionNumber" label="排片场次" width="300">
      </el-table-column>
      <el-table-column prop="rowProportion" label="排片占比" width="300">
      </el-table-column>
      <el-table-column prop="numberAveraged" label="场均人数" width="200">
      </el-table-column>
    </el-table>
    <div  style="padding:10px 0">
      <el-pagination
          :current-page="currentPage"
          :page-sizes="[5, 7, 10, 12]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
          style="margin: auto">
      </el-pagination>
    </div>
  </el-container>
</template>

<script>
import Header from "@/components/Header";
import request from "@/utils/request";
export default {
  name: "statistics",
  components: {Header},
  data(){
    return{
      currentPage:1,
      pagesize:5,
      movieName: '',
      tableData: [],
    }
  },
  methods: {
    reset(){
      this.movieName = null;
    },
    changNo() {
      this.$forceUpdate(0)
    },
    search(){
      request.post('http://localhost:8088/api/analyse/movie',{
        movieName : this.movieName
      }).then(res=>{
        this.tableData=res.data
        if(res.code =='400'){
          this.$message.error(res.message);
        }
      })
    },
    headStyle(){
      return "text-align:center"
    }
  }
}
</script>

<style scoped>

</style>